<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>下拉刷新</title>
	<style type="text/css">
		html,body,header,div,main,p,span,ul,li{ 
			margin: 0; padding: 0; 
		}
		#refreshContainer li{ 
			background-color: #eee; 
			margin-bottom: 1px; 
			padding: 20px 10px; 
		}
		.refreshText{ 
			line-height: 50px;
			text-align: center; 
		}
	</style>
</head>
<body>
<main>
	<p class="refreshText"></p>
	<ul id="refreshContainer">
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
		<li>111</li>
		<li>222</li>
		<li>333</li>
		<li>444</li>
		<li>555</li>
	</ul>
</main>

<script type="text/javascript">
	(function(window) {
		var _element = document.getElementById('refreshContainer'),
		  _refreshText = document.querySelector('.refreshText'),
		  _startPos = 0,
		  _transitionHeight = 0;

		_element.addEventListener('touchstart', function(e) {
			console.log('初始位置：', e.touches[0].pageY);
			_startPos = e.touches[0].pageY;
			_element.style.position = 'relative';
			_element.style.transition = 'transform 0s';
		}, false);
		
		_element.addEventListener('touchmove', function(e) {
			console.log('当前位置：', e.touches[0].pageY);
			_transitionHeight = e.touches[0].pageY - _startPos;
			
			if (_transitionHeight > 0 && _transitionHeight < 60) {
				_refreshText.innerText = '下拉刷新';
				_element.style.transform = 'translateY('+_transitionHeight+'px)';

				if (_transitionHeight > 55) {
				  _refreshText.innerText = '释放更新';
				}
			}				
		}, false);

		_element.addEventListener('touchend', function(e) {
			_element.style.transition = 'transform 0.5s ease 1s';
			_element.style.transform = 'translateY(0px)';
			_refreshText.innerText = '更新中...';
			
				
			setTimeout(()=>{
				_refreshText.innerText = '';
			},300)

		}, false);
	})(window);
</script>
</body>
</html>